<!DOCTYPE HTML>
<HTML>
	<HEAD>
		<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE" />
		<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
		<META HTTP-EQUIV="EXPIRES" CONTENT="0" />
		<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8" />
		<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="en,de" />
		<META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW" />
		<META NAME="AUTHOR" CONTENT="Andreas Kasch" />
		<META NAME="COPYRIGHT" CONTENT="&copy; 2013 Andreas Kasch" />
		<META NAME="DESCRIPTION" CONTENT="HTML5 Rendering Methods Evaluation" />
		<META NAME="KEYWORDS" CONTENT="HTML5, Rendering" />
		
		<TITLE>HTML5 Rendering Methods Evaluation - 3D Canvas Rendering</TITLE>
		
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="jquery-1.9.1.min.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="three.min.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="timer.js"></SCRIPT>
		<SCRIPT TYPE="text/javascript" CHARSET="utf-8" SRC="model.js"></SCRIPT>
		<STYLE TYPE="text/css">
			#area{
				width: 1250px;
				height: 800px;
				margin: 10px;
				padding: 0;
				box-shadow: 0 0 9px 1px #000;
			}
			canvas{
				width: 100%;
				height: 100%;
				margin: 0;
			}
		</STYLE>
	</HEAD>
	<BODY>
		<h1>3D Canvas Rendering</h1>
		<p>
			<input type="button" value="1 Entit&auml;t" onclick="start(1,1)"/>
			<input type="button" value="100 Entit&auml;ten" onclick="start(10,10)"/>
			<input type="button" value="1250 Entit&auml;ten" onclick="start(50,25)"/>
			<span id="debug"></span>
		</p>
		<div id="area">
		
		</div>
		<p><a href="index.html">Zur&uuml;ck</a></p>
		<script type="text/javascript">
			var start = function(x, y){
				var m = new Model(x, y);
				
				var img;
				var mats;
				var scene;
				var camera;
				var renderer;
				
				var setup = function(cb){
					$("#area").html("");
					img = {};
					mats = [];
					var width = 1250;
					var height = 800;
					
					scene = new THREE.Scene();
					
					camera = new THREE.OrthographicCamera( 0-12.5, width-12.5, 0+16, -height+16, 1, 1000 );
					camera.position.z = 1;
					
					renderer = new THREE.WebGLRenderer();
					renderer.setClearColorHex( 0xffffff, 1 );
					
					renderer.setSize(width,height);
					document.getElementById('area').appendChild(renderer.domElement);
					
					var ambientLight = new THREE.AmbientLight(0xffffff);
					scene.add(ambientLight);
					
					var imgs = FRAMES;
				
					for(var i in imgs){
						img[imgs[i]] = THREE.ImageUtils.loadTexture(imgs[i]);
					}
					
					var geometry = new THREE.PlaneGeometry(25,32);
					
					for(var i in m){
						var src = m[i].frames[m[i].current];
						var mat = new THREE.MeshLambertMaterial({map: img[src], transparent: true});
						mats.push(mat);
						var plane = new THREE.Mesh(geometry, mat);
						plane.side = THREE.DoubleSide;
						plane.position.x = m[i].x;
						plane.position.y = -m[i].y;
						scene.add(plane);
					}
					
					cb();
				};
				
				
				var draw = function(cb){
					for(var i in m){
						m[i].current = (m[i].current+1)%m[i].frames.length;
						var src = m[i].frames[m[i].current];
						mats[i].map = img[src];
					}
					renderer.render(scene, camera);
					//requestAnimationFrame(cb); //this would limit the framerate to 60 fps
					setTimeout(cb, 1);
				};
				
				var done = function(time, fps){
					$("#debug").html("Zeit: " + time/1000. + " Sekunden, FPS: " + fps);
				};
				
				var t = new Timer(setup, draw, done);
				
				t.run();
			};
		</script>
	</BODY>
</HTML>